<template>
  <view>
    <view class="tabs">
      <view v-for="(item,index) in tabsData" :key="index" class="tabsList">
        <view :class="['tab-item', active == index ? 'current':'' ]" @click="activeEvent(index)">
          {{ item }}
        </view>
      </view>

    </view>
    <view v-if="active === 0">
      <introduction :idsData="idsData"></introduction>
    </view>
    <view v-if="active === 1">
      <challenge :idsData="idsData"></challenge>
    </view>
    <view v-if="active === 2">
      <travelAlbum :idsData="idsData"></travelAlbum>
    </view>
  </view>
</template>

<script>
import challenge from "./task/challenge.vue"
import introduction from "./introduce/introduction.vue"
import travelAlbum from "./travelAlbum/travelAlbum.vue"

export default {
  components: {
    challenge,
    introduction,
    travelAlbum
  },
  data() {
    return {
      active: 0,
      tabsData: ['景点介绍', '任务挑战', '旅程留影'],
      idsData: {},

    }
  },
  onLoad(data) {
    console.log('数据', data);
    // data.locked   是否开启签到
    // data.status   0 未签到  1 已签到  2 已完成

    // this.idsData = {
    // 	partyId: data.partyId,
    // 	scenicId: data.scenicId,
    // 	groupId: data.groupId,
    // 	locked: data.locked,
    // 	status: data.status,
    // 	groupScenicId: data.groupScenicId,
    // 	totalDistance: data.totalDistance,
    // 	itineraryId: data.itineraryId,
    // 	prevSenicId: data.prevSenicId ? data.prevSenicId : null,
    // 	roles: JSON.parse(decodeURIComponent(data.rolesJSON)),
    // 	activeName: data.active
    // }
    // console.log()
    this.idsData = JSON.parse(uni.getStorageSync('taskChangeTab'))
    if (this.idsData.activeName === 'desc') {
      this.active = 0
    } else if (this.idsData.activeName === 'task') {
      this.active = 1
    } else {
      this.active = 2
    }
  },
  methods: {
    /**tab栏切换*/
    activeEvent(data) {
      this.active = data
      if (data == 1) {

      }
    },

  },
}
</script>


<style lang="scss" scoped>
.tabs {
  width: 100%;
  display: flex;
  height: 100rpx;
  line-height: 100rpx;

  .tabsList {
    flex: 1;
  }
}

.tab-item {
  width: 100%;
  text-align: center;
  background: #4186f5;
  color: #fff;
  font-family: PingFang SC, PingFang SC-Medium;
}

.current {
  background: #ff9802;
}
</style>
